/*
 * @Author: humengchuan 531537052@qq.com
 * @Date: 2024-07-18 16:46:01
 * @LastEditors: humengchuan 531537052@qq.com
 * @LastEditTime: 2025-03-18 15:47:41
 * @FilePath: \projecte:\学习\react\react-optimize-ts\src\views\home\index.tsx
 * @Description: 
 */
import React, { useState } from 'react'
import {
    MenuFoldOutlined,
    MenuUnfoldOutlined,
} from '@ant-design/icons';
import { Button, Layout, theme } from 'antd';
import { Outlet } from 'react-router-dom';
const { Header, Sider, Content } = Layout;
import styles from './index.module.scss'
import LeftMenu from './leftMenu/menuItem'
import HeaderRight from './headerRight/index'

const index = () => {
    const [collapsed, setCollapsed] = useState(false);
    const {
        token: { colorBgContainer, borderRadiusLG },
    } = theme.useToken();

    return (
        <Layout className={styles.content}>
            <Sider trigger={null} collapsible collapsed={collapsed}>
                <div className="demo-logo-vertical" />
                <LeftMenu />

            </Sider>
            <Layout>
                <Header className={styles.header} style={{ padding: 0, background: colorBgContainer }}>
                    <Button
                        type="text"
                        icon={collapsed ? <MenuUnfoldOutlined /> : <MenuFoldOutlined />}
                        onClick={() => setCollapsed(!collapsed)}
                        style={{
                            fontSize: '16px',
                            width: 64,
                            height: 64,
                        }}
                    />
                    <HeaderRight></HeaderRight>
                </Header>
                <Content
                    style={{
                        margin: '24px 16px',
                        padding: 24,
                        minHeight: 280,
                        background: colorBgContainer,
                        borderRadius: borderRadiusLG,
                    }}
                >
                    {/* Content2222222222 */}
                    <Outlet />
                </Content>
            </Layout>
        </Layout>
    )
}

export default index